<template>
  <div style="margin-bottom: 20px;"
       class="flex alignCenter between"
  >
    <a-form
      layout="inline"
      :model="queryFrom"
    >
      <a-form-item>
        <a-input v-model:value="queryFrom.key" placeholder="查询条件"/>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="search">搜索</a-button>
      </a-form-item>
      <a-form-item>
        <a-button @click="reset">重置</a-button>
      </a-form-item>
    </a-form>
    <a-button type="primary" v-auth="['article:article:add']" @click="show=true">新增</a-button>
  </div>
  <a-table :columns="columns"
           :data-source="dataList"
           :pagination="pagination"
           rowKey="id"
  >
    <template #bodyCell="{ column, record }">

        <template v-if="column.dataIndex==='avatar'">
          <a-image
              :src="getImgUrl(record[column.dataIndex])"
              width="120px"
              height="60px"
              preview
          ></a-image>
        </template>
      <template v-if="column.dataIndex==='isStick'">
        <a-switch
            v-model:checked="record[column.dataIndex]"
        :checked-value="1"
        :un-checked-value="0"
            @change="(data:any)=>switchChange(data,record.id)"
        ></a-switch>
      </template>
      <template v-if="column.dataIndex==='publishStatus'">
        <a-tag v-if="record[column.dataIndex]===1"
        color="success"
        >
          已发布
        </a-tag>
        <a-tag v-if="record[column.dataIndex]===0"
        color="error"
        >
          已下架
        </a-tag>
      </template>
      <template v-if="column.dataIndex==='isOriginal'">
        <a-tag v-if="record[column.dataIndex]===1"
               color="success"
        >
          原创
        </a-tag>
        <a-tag v-if="record[column.dataIndex]===0"
               color="error"
        >
          转载
        </a-tag>
      </template>
      <template v-if="column.dataIndex==='operation'">
        <div style="display: flex;width: 100%;justify-content: center;align-items: center">
          <div v-auth="['article:article:update']">
            <a-button type="link" size="small" @click="openModel(record)">编辑</a-button>
          </div>
          <div  v-auth="['article:article:delete']">
            <a-popconfirm
               title="确定删除吗"
               @confirm="remove(record.id)"
               ok-text="确定"
               cancel-text="取消"
            >
              <a-button danger type="link" size="small">删除</a-button>
            </a-popconfirm>
          </div>
        </div>
      </template>

    </template>
  </a-table>
  <add-or-update v-model="show" :row="barticle" @success="success"/>
</template>
<script setup lang="ts">
import {onMounted, ref, defineComponent} from "vue";
  import {message, TableColumnProps} from "ant-design-vue";
  import {queryList,del,edit} from '@/api/article/index.ts'
  import AddOrUpdate from "./add-or-update.vue";
import {PaginationConfig} from "ant-design-vue/es/pagination";
  defineComponent({
    AddOrUpdate
  })
  const generateQueryFrom = ()=>{
    return{
      key:'',
      pageNo:1,
      pageSize:10
    }
  }
  const generatePagination= ():PaginationConfig=>{
    return{
      current:1,
      pageSize:10,
      total:0,
      showSizeChanger:true
    }
  }
  const queryFrom = ref(generateQueryFrom())
  const pagination = ref(generatePagination())
  const barticle = ref(null)
  const dataList = ref([])
  const baseImgUrl  = import.meta.env.VITE_BASE_IMG_URL
  const columns:TableColumnProps[] = [
    {
      title: '文章封面地址',
      dataIndex: 'avatar',
      key: 'avatar',
      align:'center',
    },
    {
      title: '文章标题',
      dataIndex: 'title',
      key: 'title',
      align:'center'
    },
    {
      title: '分类',
      dataIndex: 'categoryId',
      key: 'categoryId',
      align:'center'
    },
    {
      title: '发布状态',
      dataIndex: 'publishStatus',
      key: 'publishStatus',
      align:'center'
    },
    {
      title: '是否原创',
      dataIndex: 'isOriginal',
      key: 'isOriginal',
      align:'center'
    },
    {
      title: '是否首页轮播',
      dataIndex: 'isCarousel',
      key: 'isCarousel',
      align:'center'
    },
    {
      title: '是否推荐',
      dataIndex: 'isRecommend',
      key: 'isRecommend',
      align:'center'
    },
    {
      title: '是否置顶',
      dataIndex: 'isStick',
      key: 'isStick',
      align:'center'
    },
    {
      title: '创建人',
      dataIndex: 'createBy',
      key: 'createBy',
      align:'center'
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
      align:'center'
    },
    {
      title: '操作',
      dataIndex:'operation',
      key: 'operation',
      align:'center'
    }
  ];


  const show = ref(false)
  const getList = ()=>{
    queryList(queryFrom.value).then((res:any)=>{
      dataList.value = res.result.records;
      pagination.value.total = res.result.total
    })
  }

  const openModel = (row:any)=>{
    barticle.value = {...row};
    show.value =true;
  }
  const success =()=>{
    message.success('操作成功');
    show.value = false;
    getList();
  }
  const remove = (id:any)=>{
    del(id).then((res:any)=>{
      if(res&&res.code===200){
        message.success("操作成功");
        getList()
      }
    })
  }
  const search = ()=>{
    queryFrom.value.pageNo = 1;
    getList();
  }
  const reset = ()=>{
    queryFrom.value = generateQueryFrom();
    getList();
  }
  const switchChange = (data,id)=>{
    console.log(data,id)
    edit({
      id,
      isStick:data
    }).then(()=>{
      message.success(`${data==0?'取消置顶':'置顶'}成功`)
      getList();
    })
  }
  const getImgUrl =(url:string)=>{
    const regex = /^(https?:\/\/[^\s/$.?#].[^\s]*)$/i;
    console.log(regex.test(url))
    if(regex.test(url)){
      return url;
    }
    return baseImgUrl+'/'+url
  }
  onMounted(()=>{
    getList();
  })
</script>
<style scoped lang="scss">

</style>
